<!-- components/navigation/Breadcrumb.vue -->
<template>
  <el-breadcrumb separator="/" class="custom-breadcrumb">
    <el-breadcrumb-item 
      v-for="(item, index) in breadcrumbItems" 
      :key="index"
      :to="item.path"
    >
      {{ item.title }}
    </el-breadcrumb-item>
  </el-breadcrumb>
</template>

<script setup lang="ts">
// @ts-nocheck
import { computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { menuConfig } from '@/config/menu'

const route = useRoute()
const router = useRouter()

const breadcrumbItems = computed(() => {
  // 根据当前路由路径生成面包屑
  const pathArray = route.path.split('/').filter(item => item)
  const breadcrumbs = []
  
  // 添加首页
  breadcrumbs.push({
    path: '/dashboard',
    title: '首页'
  })
  
  // 查找匹配的菜单项
  let currentPath = ''
  for (const path of pathArray) {
    currentPath += `/${path}`
    // 在主菜单中查找匹配项
    const foundItem = findMenuItemByPath(menuConfig, currentPath)
    if (foundItem) {
      breadcrumbs.push({
        path: currentPath,
        title: foundItem.meta?.title || foundItem.name
      })
    }
  }
  
  return breadcrumbs
})

// 递归查找菜单项
const findMenuItemByPath = (menuItems: any[], path: string) => {
  for (const item of menuItems) {
    if (item.path === path) {
      return item
    }
    if (item.children) {
      const found = findMenuItemByPath(item.children, path)
      if (found) {
        return found
      }
    }
  }
  return null
}
</script>

<style scoped>
.custom-breadcrumb {
  margin-bottom: 20px;
  padding: 10px 0;
  background: transparent;
}

.custom-breadcrumb :deep(.el-breadcrumb__item) {
  font-size: 14px;
}

.custom-breadcrumb :deep(.el-breadcrumb__inner) {
  color: var(--text-regular, #606266);
  transition: color 0.3s ease;
}

.custom-breadcrumb :deep(.el-breadcrumb__inner):hover {
  color: var(--primary-color, #409eff);
  cursor: pointer;
}

.custom-breadcrumb :deep(.el-breadcrumb__separator) {
  color: var(--text-secondary, #909399);
}
</style>